<template>
  <div  class="ArticleList">
    <div v-for="item in article" :key="item.id" class="Article_item">
      <div class="itemInfo">
        <div class="headerInfo">
          <n-avatar
            :size="40"
            src="https://img1.baidu.com/it/u=2254335233,3228305632&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=399"
          />
          <div class="headerInfo_right">
            <span>{{item.username}}</span>
            <span>{{item.issueData}}</span>
          </div>
        </div>
        <div class="like">
          <n-button type="success" ghost>like</n-button>
        </div>
      </div>
      <div @click="showArticleFn(item)" class="content">
        {{item.article}}
      </div>
      <div class="tags">
        {{item.tags}}
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted,  ref } from "vue";
import { getAllArticleAPI,getMyArticlesAPI,getclassifyArticlesAPI } from "@/api/index";
import {useRouter} from 'vue-router'
export default {
  setup(props, { attrs, slots, emit }) {
    const router=useRouter()
    const article=ref([])
    const getArticle = async () => {
      if (props.ArticleClassify === "Global Feed"||props.ArticleClassify === "Your Feed") {
        const res = await getAllArticleAPI();
        article.value=res.data
      }
      else if(props.ArticleClassify==='My Article'){
        const res = await getMyArticlesAPI();
        article.value=res.data
      }
      else{
        const res=await getclassifyArticlesAPI(props.ArticleClassify)
        article.value=res.data
      }
    };
    const showArticleFn=(item)=>{
      router.push({
        path:'/showarticle',
        query:{id:item.id}
      })
    }
    onMounted(() => {
      getArticle();
    });
    return {
        article,
        showArticleFn
    };
  },
  props: ["ArticleClassify"],
};
</script>

<style scoped>
.Article_item {
  width: 820px;
  margin-bottom: 20px;
}
.itemInfo {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.headerInfo {
  display: flex;
  align-items: center;
}
.headerInfo_right {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.content {
  font-size: 16px;
  font-weight: bold;
}
.tags {
  color: #ccc;
}
</style>